<template>
  <view class="content">
    <view class="listcontent" v-for="shop in shops" :key="shop.id" @click="shopclick(shop._id)">
      <view class="listitem image-container">
        <img :src="`/static/${shop.imgUrl}`" mode="aspectFit" class="shop-image" />
      </view>
      <view class="listitem listcon">
        <view class="shop-name">{{shop.name}}</view>
        <view class="listrow">
          <view>月售：{{shop.sales}}</view>
          <view>起送：{{shop.expressLimit}}</view>
          <view>基础运费：{{shop.expressPrice}}</view>
        </view>
        <view class="shop-slogan">{{shop.slogan}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shops: [],
    };
  },
  onLoad(options) {
    this.showdata();
  },
  methods: {
    showdata(id) {
      uni.request({
        url: `https://67f85eae7719dfcd4b47e8f1.hz-iframe-svc.simplelab.cn/hotList`,
        success: (res) => {
          this.shops = res.data;
        },
      });
    },
    shopclick(id) {
      console.log(id);
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`,
      });
    },
  },
};
</script>

<style scoped>
.content {
  padding: 16px;
  box-sizing: border-box;
}

.listcontent {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #e5e5e5;
  padding-top: 16px;
}

.image-container {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 8px;
}

.shop-image {
  width: 100%;
  height: 100%;
}

.listcon {
  margin-left: 16px;
  flex: 1;
}

.shop-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.listrow {
  display: flex;
  flex-direction: row;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.listrow view {
  margin-right: 16px;
}

.shop-slogan {
  color: red;
  font-size: 14px;
}
</style>    